<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view>
		<view class="title" style="font-size:34rpx;margin: 20rpx 40rpx; text-align: center">升级代理</view>
		<view style="margin: 0rpx 40rpx; text-align: left;">代理级别说明:</view>
		<view style=" border-radius: 30rpx; margin: 0rpx 40rpx; background-color: #ffffff; ">
			<u-table border-color="#dead66">
				<u-tr>
					<u-th>代理级别</u-th>
					<u-th>直邀好友</u-th>
					<u-th>间邀好友</u-th>
					<u-th>升级条件</u-th>
				</u-tr>

				<u-tr v-for="(item,index) in userAgentShopList" :key="index">
					<u-td>{{item.agentName}}</u-td>
					<u-td>{{item.dirPercent}}%</u-td>
					<u-td>{{item.indirPercent}}%</u-td>
					<u-td v-if="item.needInviteNum>0" >直邀{{item.needInviteNum}}人</u-td>
					<u-td v-else>无</u-td>
				</u-tr>
			</u-table>
			<view style="color: #939294; font-size: 18upx; margin-top: 12upx; text-align: left;">
				<u-icon name="info" color="#ff8a00"></u-icon>好友在平台的所有消费都有提成，您可通过邀请好友或直接购买套餐进行升级
			</view>
		</view>
		<u-row justify="center" gutter="30" style="padding: 0upx 24rpx; margin-top: 40upx;">
			<u-col v-for="(item,index) in pirceGeZeroShopList" :key="index" :span="12/pirceGeZeroShopList.length"
				text-align="center">

				<view class="setMeal" @tap="agentTapInfo(index)">
					<view class="meal-content" :class="{'meal-content-active': agentShopSelect==index}">
						<u-badge :is-center="false" type="error" :count="item.sendVipTime==1200?'送永久会员':'送'+item.sendVipTime/12+'年会员'"
							 :offset="[-18, 40]" size="default" bgColor="#e16240"></u-badge>
						<view class="meal-content-header">
							<view class="price" style="font-size: 50upx; color: #e7a14e; font-weight: 500;">
								<u-icon name="rmb" color="#dead66" size="28">￥</u-icon>
								{{item.price}}
							</view>
							<s class="originalPrice" style="color: #939294;">
								￥{{item.originalPrice}}
							</s>
						</view>
						<view style="height: 30%; display: flex; align-items: center; justify-content: center;">
							{{item.agentName}}
						</view>
					</view>
				</view>
			</u-col>
		</u-row>
		<u-button shape="circle" type="success" style="background-color: #50c34d; margin: 40upx;" @click="subimt()">确认支付
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userAgentShopList: [], //购买代理的套餐列表
				pirceGeZeroShopList: [], //价格大于零的套餐列表
				agentShopSelect: 0, //购买代理默认选中
			}
		},
		created() {
			this.init()
		},
		methods: {
			/**
			 * 获取价格大于零的套餐
			 */
			getPirceGeZeroShopList() {
				let pirceGeZeroShopList = [];
				for (let i = 0; i < this.userAgentShopList.length; i++) {
					if (this.userAgentShopList[i].price) {
						pirceGeZeroShopList.push(this.userAgentShopList[i])
					}
				}
				return pirceGeZeroShopList

			},
			subimt() {
				let query = {};
				query.scene = '2';
				query.goodId = this.pirceGeZeroShopList[this.agentShopSelect].id;
				this.$Router.push({
					path: "/pages/my/recharge",
					query: query
				})
			},
			/**
			 * 初始化
			 */
			init() {
				this.$api.api('config.agentList', {
						"pageNum": 0,
						"pageSize": 10,
						"orderByColumn": "agentLevel",
						"isAsc": "ascending"
					})
					.then(res => {
						if (res.code == 200) {
							this.userAgentShopList = res.rows
							this.pirceGeZeroShopList = this.getPirceGeZeroShopList()
							this.agentShopSelect = this.pirceGeZeroShopList.length - 1
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 * 代理充值套餐选中
			 * @param {Object} e
			 */
			agentTapInfo(e) {
				this.agentShopSelect = e
			}
		}
	}
</script>

<style lang="scss">
	.u-table {
		font-weight: 450;

		.u-th {
			background-color: #dead66;
			color: #ffffff;
		}
	}

	.setMeal {
		width: 100%;
		height: 180upx;

		.meal-content {
			width: 100%;
			height: 100%;
			background-color: #f8e8d3;
			border-radius: 16upx; //面包圆形倒角
			border: 0.8px solid #f8e8d3;
			position: relative;

			.meal-content-header {
				padding-top: 10upx;
				background-color: #f8f8f8;
				height: 70%;
				border-radius: 16upx 16upx 0px 0px;
			}
		}

		//被选中的代理套餐
		.meal-content-active {
			background-color: #dead66;
			border: 0.5px solid #dead66;
		}
	}
</style>
